<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body,p,h1,h2,h3{
	padding: 0;
	margin: 0;
}
ul,li{
	padding: 0;
	margin: 0;
	list-style: none;
}
html,body,#main{
	width: 608px;
	height: 352px;
}
#main{
	background: url("./images/background_c.jpg") left top no-repeat;
	position: relative;
}
.time{
	position: absolute;
	right: 16px;
	top: 18px;
	color: #fff;
	font-size: 14px;
	font-family: "微软雅黑";
}
.banner{
	padding-top: 60px;
	padding-left: 14px;
	float: left;
}
.today{
	width: 186px;
	height: 176px;
	background: rgba(2, 15, 34, 0.8);
	border-radius: 5px;
	float: left; 
	margin-right: 10px;
}
.tomorrow{
	width: 186px;
	height: 176px;
	background: rgba(2, 15, 34, 0.8);
	border-radius: 5px;
	float: left; 
	margin-right: 10px;
}
.after{
	width: 186px;
	height: 176px;
	background: rgba(2, 15, 34, 0.8);
	border-radius: 5px;
	float: left; 
}
img{
	width: 180px;
	height: 70px;
	padding: 3px 0 0 3px;
	border-radius: 8px 8px 0 0;
}
h1{
	font-size: 16px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	line-height: 36px;
	height: 36px;
	border-bottom: 1px solid #fff;
	font-family: "微软雅黑";
	overflow: hidden;
}
.leve{
	border-top: #77a0dc solid 1px;
	font-size: 14px;
	color: #fff;
	font-family: "微软雅黑";
	padding-top: 6px;
	padding-left: 40px;
	background: url('./images/logo_a.png') 18px 8px no-repeat;
	height: 20px;
	line-height: 20px;
	overflow: hidden;
}
.poll{
	font-size: 14px;
	color: #fff;
	font-family: "微软雅黑";
	padding: 6px 0 6px 40px;
	background: url('./images/logo_b.png') 18px center no-repeat;
	height: 20px;
	line-height: 20px;
	overflow: hidden;
}
.title{
	position: relative;
	height: 76px;
	width: calc(100% - 28px);
	margin: 18px 14px 6px 14px;
	float: left;
	background: rgba(2, 15, 34, 0.8);
	border-radius: 5px;
}
.title p{
	font-size: 16px;
	color: #fff;
	font-family: "微软雅黑";
	line-height: 22px;
	padding-left: 10px;
	overflow: hidden;
	padding-top: 5px;
}
.title b{
	position: absolute;
	width: 12px;
	height: 8px;
	background: red;
	top: -8px;
	left: 80px;
	background: url('./images/love.png') left bottom no-repeat;
}
.paragraph{
	height: 80px;
	width: calc(100% - 28px);
	margin: 0 14px;
	float: left;
	background: rgba(2, 15, 34, 0.8);
	border-radius: 5px;
}
.paragraph p{
	font-size: 14px;
	color: #fff;
	font-family: "微软雅黑";
	padding: 0 10px;
}
.paragraph p.paragraph-a{
	padding-top: 5px;
	line-height: 18px;
}
.paragraph p.paragraph-b{
	font-size: 14px;
}


</style>
</head>
<body>

<div id="main">
	<div class="time"></div>
	<div class="banner">
		<div class="today">
			<img src="./images/1.png" alt="">
			<h1></h1>
			<p class="leve"></p>
			<p class="poll"></p>
		</div>
		<div class="tomorrow">
			<img src="./images/2.png" alt="">
			<h1></h1>
			<p class="leve"></p>			
			<p class="poll"></p>
		</div>
		<div class="after">
			<img src="./images/3.png" alt="">
			<h1></h1>
			<p class="leve"></p>
			<p class="poll"></p>
		</div>
	</div>
	<div class="title">
		<p></p>
		<b></b>
	</div>
	<div class="paragraph" style="display: none">
		<p class="paragraph-a">
		</p>
		<p class="paragraph-b"></p>
	</div>
</div>
	

<script src="./js/jquery-3.2.1.js"></script>
<script>

var imgSrcObj = [
	["./images/1.png","./images/2.png","./images/3.png"],
	["./images/4.png","./images/5.png","./images/6.png"],
	["./images/7.png","./images/8.png","./images/9.png"],
	["./images/10.png","./images/11.png","./images/12.png"],
	["./images/13.png","./images/14.png","./images/15.png"],
	["./images/16.png","./images/17.png","./images/18.png"],
	["./images/19.png","./images/20.png","./images/21.png"],
	["./images/22.png","./images/23.png","./images/24.png"],
	["./images/25.png","./images/26.png","./images/27.png"],
	["./images/28.png","./images/29.png","./images/30.png"],
	["./images/31.png","./images/32.png","./images/33.png"],
	["./images/34.png","./images/35.png","./images/36.png"],
	["./images/37.png","./images/38.png","./images/39.png"],
	["./images/40.png","./images/41.png","./images/42.png"],
	["./images/43.png","./images/44.png","./images/45.png"],
	["./images/46.png","./images/30.png","./images/21.png"]
]

getImgSrc()

setInterval(function(){
	getImgSrc()
},864000000) //10天

function getImgSrc(){
	var imgNum = new Date().getDate()
	var img

	if(imgNum == 1){
		img = imgSrcObj[0]
	}
	if(imgNum == 2){
		img = imgSrcObj[1]
	}
	if(imgNum == 3){
		img = imgSrcObj[2]
	}
	if(imgNum == 4){
		img = imgSrcObj[3]
	}
	if(imgNum == 5){
		img = imgSrcObj[4]
	}
	if(imgNum == 6){
		img = imgSrcObj[5]
	}
	if(imgNum == 7){
		img = imgSrcObj[6]
	}
	if(imgNum == 8){
		img = imgSrcObj[7]
	}
	if(imgNum == 9){
		img = imgSrcObj[8]
	}
	if(imgNum == 10){
		img = imgSrcObj[9]
	}
	if(imgNum == 11){
		img = imgSrcObj[10]
	}
	if(imgNum == 12){
		img = imgSrcObj[11]
	}
	if(imgNum == 13){
		img = imgSrcObj[12]
	}
	if(imgNum == 14){
		img = imgSrcObj[13]
	}
	if(imgNum == 15){
		img = imgSrcObj[14]
	}
	if(imgNum == 16){
		img = imgSrcObj[15]
	}
	if(imgNum == 17){
		img = imgSrcObj[0]
	}
	if(imgNum == 18){
		img = imgSrcObj[1]
	}
	if(imgNum == 19){
		img = imgSrcObj[2]
	}
	if(imgNum == 20){
		img = imgSrcObj[3]
	}
	if(imgNum == 21){
		img = imgSrcObj[4]
	}
	if(imgNum == 22){
		img = imgSrcObj[5]
	}
	if(imgNum == 23){
		img = imgSrcObj[6]
	}
	if(imgNum == 24){
		img = imgSrcObj[7]
	}
	if(imgNum == 25){
		img = imgSrcObj[8]
	}
	if(imgNum == 26){
		img = imgSrcObj[9]
	}
	if(imgNum == 27){
		img = imgSrcObj[10]
	}
	if(imgNum == 28){
		img = imgSrcObj[11]
	}
	if(imgNum == 29){
		img = imgSrcObj[12]
	}
	if(imgNum == 30){
		img = imgSrcObj[13]
	}
	if(imgNum == 31){
		img = imgSrcObj[14]
	}
	$(".today img").attr("src",img[0])
	$(".tomorrow img").attr("src",img[1])
	$(".after img").attr("src",img[2])
}

getAjax()
setInterval(function(){
	var minutes = new Date().getMinutes()
	if( minutes == 35){
		console.log( new Date() , minutes )
		getAjax()
	}
},60000)


function getAjax(){
	$.ajax({
		type: "get", //jquey是不支持post方式跨域的
		url: "http://19.130.213.59:8080/fsmobile/pub/bigScreen/getForecastData", //跨域请求的URL
		dataType: "jsonp",
		jsonp: "jsoncallback",
		success: function(json){ 
			console.log(json)
			if(json.meta.success){
				getJson(json.data)
			}else{
				$(".today h1").html("无数据")
				$(".tomorrow h1").html("无数据")
				$(".after h1").html("无数据")
				$(".today p").hide()
				$(".tomorrow p").hide()
				$(".after p").hide()
			}
		},
		error: function(){
			$(".today h1").html("无数据")
			$(".tomorrow h1").html("无数据")
			$(".after h1").html("无数据")
			$(".today p").hide()
			$(".tomorrow p").hide()
			$(".after p").hide()
		}
	})

	// 旧的天气预报json接口
	/*
	$.ajax({
		type: "get", //jquey是不支持post方式跨域的
		url: "http://19.130.213.59:8080/fsmobile/pub/bigScreen/getForecastShortTimeData", //跨域请求的URL
		dataType: "jsonp",
		jsonp: "jsoncallback",
		success: function(json){ 
			if(json.meta.success){
				$(".paragraph-a").html(json.data[0] + json.data[1])
			}
		}
	})

	// 新增的天气预报xml接口
	$.ajax({
		type: "get", 
		url: "./test.xml", 
		success: function(json){ 
			console.log(json,1)
			if(json){

			}else{

			}
		},
		error: function(err){

			getXml(err.responseText)
		}
	})
	*/
}


function getJson(json){
	$(".today h1").html(json.H24.slice(5,7) + "月" + json.H24.slice(8,10) + "日/" + json.H24_DAY)
	$(".tomorrow h1").html(json.H48.slice(5,7) + "月" + json.H48.slice(8,10) + "日/" + json.H48_DAY)
	$(".after h1").html(json.H72.slice(5,7) + "月" + json.H72.slice(8,10) + "日/" + json.H72_DAY)

	$(".today .poll").html(regReplace(json.MANAUAL_COM24))      // "首要污染物:" + 
	$(".tomorrow .poll").html(regReplace(json.MANAUAL_COM48))   // "首要污染物:" + 
	$(".after .poll").html(regReplace(json.MANAUAL_COM72))      // "首要污染物:" + 

	$(".today .leve").html(json.AUTO_COM24)      // "污染物等级:" +
	$(".tomorrow .leve").html(json.AUTO_COM48)   // "污染物等级:" +
	$(".after .leve").html(json.AUTO_COM72)      // "污染物等级:" +

	$(".title p").html("健康提示：" + json.SUGGEST)
	// $(".paragraph-a").html(json.HEALTH)
	// $(".paragraph-b").html("发布时间：" + json.RESULT_TIME)
}
function getXml(xmlStr){
	var arrBFFO = xmlStr.toString().split("<AREACODE>BFFO</AREACODE>")
	var arrXml = []
	for(var i = 0 ; i < arrBFFO.length ; i++){
		if(i == arrBFFO.length-1 || i == arrBFFO.length-2){
			arrXml.push(arrBFFO[i].split("</D>")[0])
		}
	}
	var strHtml1 = getMapXml(arrXml[0],"YBSX") + "：" + getMapXml(arrXml[0],"WEATHER") + getMapXml(arrXml[0],"WDWF") + "，气温：" + getMapXml(arrXml[0],"MINT") + "-" + getMapXml(arrXml[0],"MAXT") + "℃，相对湿度：" + getMapXml(arrXml[0],"MINU") + "%-" + getMapXml(arrXml[0],"MAXU") + "%；"
	var strHtml2 = getMapXml(arrXml[1],"YBSX") + "：" + getMapXml(arrXml[1],"WEATHER") + getMapXml(arrXml[1],"WDWF") + "，气温：" + getMapXml(arrXml[1],"MINT") + "-" + getMapXml(arrXml[1],"MAXT") + "℃，相对湿度：" + getMapXml(arrXml[1],"MINU") + "%-" + getMapXml(arrXml[1],"MAXU") + "%；"
	$(".paragraph-a").html(strHtml1 + strHtml2)
}
function getMapXml(str,tab){
	return str.split("<"+tab+">")[1].split("</"+tab+">")[0]
}

var myTime = new Date()
var sTime = setNum(myTime.getFullYear())+ "年" +setNum(myTime.getMonth() + 1)+ "月" +setNum(myTime.getDate())+ "日 " + setNum(myTime.getHours()) + ":" + setNum(myTime.getMinutes())
$(".time").html(sTime)

setInterval(function(){
	var myTime = new Date()
	var sTime = setNum(myTime.getFullYear())+ "年" +setNum(myTime.getMonth() + 1)+ "月" +setNum(myTime.getDate())+ "日 " + setNum(myTime.getHours()) + ":" + setNum(myTime.getMinutes())
	$(".time").html(sTime)
},60000)

function setNum(num){
	if(num < 10){
		return "0" + num
	}else{
		return num
	}
}



function regReplace(str){
	var reg1 = /SO2/g
	var reg2 = /PM2.5/g
	var reg3 = /PM10/g
	var reg4 = /O3/g
	var reg5 = /NO2/g

	str = str.replace(reg1, "SO<sub>2</sub>")
	str = str.replace(reg2, "PM<sub>2.5</sub>")
	str = str.replace(reg3, "PM<sub>10</sub>")
	str = str.replace(reg4, "O<sub>3</sub>")
	str = str.replace(reg5, "NO<sub>2</sub>")
	return str
}





</script>
</body>
</html>